<template>
    <div class="about-layout">
        <h1>关于网站</h1>
        <p>分享植物图像库（Share Plant Image Library，SPIL）网站建设于2023年，
            是一个非常活跃的园艺和校园植物社区，人们在这里分享他们种植的植物的照片和信息，
            学生在这里交流校园各处的植物。<b>本网站采用SpringCloud+Vue3技术搭建</b>，
            已经收录各类植物图片<b>525</b>科<b>6087</b>属<b>50159</b>种<b>12324865</b>幅。
        </p>
        <h2>我的团队</h2>
        <el-row>
            <el-col :span="5">
                <el-card>
                    <img src="/images/about/idea.png" alt="Team Member">
                    <div slot="header" class="clearfix">
                        <span>IntelliJ IDEA</span>
                        <el-tag type="success">后端开发工具</el-tag>
                    </div>
                    <div class="text item">IDEA 全称 IntelliJ IDEA，是java编程语言的集成开发环境。IntelliJ在业界被公认为最好的Java开发工具，
                        尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、
                        创新的GUI设计等方面的功能可以说是超常的。</div>
                </el-card>
            </el-col>
            <el-col :span="5" :offset="1">
                <el-card>
                    <img src="/images/about/vscode.svg" alt="Team Member">
                    <div slot="header" class="clearfix">
                        <span>VS Code</span>
                        <el-tag type="warning">前端开发工具</el-tag>
                    </div>
                    <div class="text item">Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于
                        Mac OS X、Windows和 Linux 之上的，
                        针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。</div>
                </el-card>
            </el-col>
            <el-col :span="5" :offset="1">
                <el-card>
                    <img src="/images/about/springcloud.svg" alt="Team Member">
                    <div slot="header" class="clearfix">
                        <span>SpringCloud</span>
                        <el-tag type="success">后端框架</el-tag>
                    </div>
                    <div class="text item">Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发，
                        如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等，
                        都可以用Spring Boot的开发风格做到一键启动和部署。</div>
                </el-card>
            </el-col>
            <el-col :span="5" :offset="1">
                <el-card>
                    <img src="/images/about/vue.svg" alt="Team Member">
                    <div slot="header" class="clearfix">
                        <span>Vue</span>
                        <el-tag type="warning">前端框架</el-tag>
                    </div>
                    <div class="text item">Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。
                        它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。</div>
                </el-card>
            </el-col>
        </el-row>
        <h2>网站建设</h2>
        <el-row>
            <el-col :span="8">
                <h3>服务端</h3>
                <el-timeline>
                    <el-timeline-item center timestamp="2023-02-27" placement="top" color="#0bbd87">
                        <el-card>
                            <h4>Initial commit</h4>
                            <p>初始化项目</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2023-02-28" placement="top">
                        <el-card>
                            <h4>UserService</h4>
                            <p>完成用户服务</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item center timestamp="2023-03-01" placement="top">
                        完成作品模块
                    </el-timeline-item>
                    <el-timeline-item timestamp="2023-03-04" placement="top">
                        完成管理员模块
                    </el-timeline-item>
                </el-timeline>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="8">
                <h3>网页端</h3>
                <el-timeline>
                    <el-timeline-item center timestamp="2023-03-14" placement="top" color="#0bbd87">
                        <el-card>
                            <h4>Initialize Project</h4>
                            <p>初始化项目</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2023-03-17" placement="top">
                        <el-card>
                            <h4>Navigation Jump</h4>
                            <p>完成导航跳转</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item center timestamp="2023-03-19" placement="top">
                        完成作品展示
                    </el-timeline-item>
                    <el-timeline-item timestamp="2023-03-21" placement="top">
                        完成用户信息
                    </el-timeline-item>
                    <el-timeline-item timestamp="2023-04-02" placement="top" type='primary' :hollow="true">
                        <el-card>
                            <h4>Basic</h4>
                            <p>完成基本功能</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.about-layout {
    background-color: #fff;
    margin: 0 auto;
    padding: 50px 20px;
}


h1 {
    font-size: 36px;
    margin-bottom: 30px;
}

h2 {
    font-size: 24px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.item {
    margin-bottom: 10px;
}

img {
    width: 150px;
    height: 150px;
}
</style>